{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/TIL&TEL_weekly_19-08-04 /","result":{"data":{"markdownRemark":{"id":"553b641f-8393-5f54-be20-ce7aa745c3bc","html":"<h2 style=\"color:rgb(9, 136, 104)\">TIL & TEL 19.07.29~ 19.08.04 </h2>\n### TIL( Today I Learned)\n<ul>\n<li>\n<p>19.07.29 </p>\n<ul>\n<li>위코더들 자기소개 </li>\n<li>학습 계획 공유 </li>\n<li>CSS 복습 문제풀이 </li>\n<li>CSS 문제풀이후 JS 복습 문제풀이 </li>\n</ul>\n</li>\n<li>\n<p>19.07.30</p>\n<ul>\n<li>장비세팅 </li>\n<li>JavaScript 공부</li>\n</ul>\n</li>\n<li>\n<p>19.07.31</p>\n<ul>\n<li>JavaScript 공부</li>\n<li>개발자도구 다루기 </li>\n<li>html/ css 실습 돌입 </li>\n</ul>\n</li>\n<li>\n<p>19.08.01 </p>\n<ul>\n<li>자바스크립트 마무리</li>\n<li>Dom셀렉터 공부</li>\n<li>Flex 적용 게임 - 개구리게임 </li>\n<li>트위터클론 이벤트 만들기 </li>\n</ul>\n</li>\n<li>\n<p>19.08.02</p>\n<ul>\n<li>자바스크립트 이벤트 컨트롤 ​</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"tel-trial-and-error-log\" style=\"position:relative;\"><a href=\"#tel-trial-and-error-log\" aria-label=\"tel trial and error log permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>TEL (Trial and Error Log)</h3>\n<ul>\n<li>\n<p>19.07.30 </p>\n<ul>\n<li>For 문 에러\nfor문 사용시 return 을 for문 안에서 사용해 버리면 for문이 돌지를 못한다. return 하고 후속 과정을 종료해버리기때문이다. 코드스테이츠 시험에서 한번 틀렸었는데 또 틀렸네.</li>\n<li>함수 실행 에러\n함수인지 아닌지 구분을 잘 하시고, 함수이면 함수를 참조하는지, 함수실행 결과를 참조하는지 잘 구분하고 코딩할것!</li>\n</ul>\n</li>\n<li>\n<p>19.07.31</p>\n<ul>\n<li>ES6 arrow function 선언하기</li>\n</ul>\n<p> <code class=\"language-text\">const or let 함수명 = ( param ) =&gt; { 함수코드} 단일 리턴일 경우 {} 생략 가능!!</code></p>\n<ul>\n<li>\n<p>appendChild 잘못 실행 </p>\n<div class=\"gatsby-highlight\" data-language=\"constdoassignment = () => \"><pre class=\"language-constdoassignment = () => \"><code class=\"language-constdoassignment = () => \">var inputposition = document.getElementById(&#39;h1-title&#39;) ;\nlet makePtag = document.createElement(&#39;p&#39;) ;\nmakePtag.className = &#39;dom&#39; ;\nmakePtag.innerHTML = &#39;DOM&#39; ;</code></pre></div>\n</li>\n</ul>\n<p>console.log(makePtag);\nconsole.log(inputposition);</p>\n<p>inputposition.appendChild(makePtag) ;\n} ;</p>\n<p>doassignment() ; `<code class=\"language-text\"></code> </p>\n<p>inputposition 앞에 document 붙여서 틀림.. - _ -;;;</p>\n<p>컴퓨터는 안틀려.. 바름이는 틀려… 안되면 이유가 있다.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">- 내컴에서만 돌아가는 코드는 의미가 없어요 ㅜㅠ 끼워맞추기 코딩\n\n- ```javascript\nconst getCookieValue = () =&gt; { \n  let result = &quot;&quot; ; \nlet sentence = document.cookie ; \n  let position = sentence.indexOf(&#39;ajs_anonymous_id&#39;) ;\n  let cutlength = sentence.indexOf(&#39;ajs_user_id&#39;)-2 ; // &lt;==고정값이 되버리면 다른데 응용을 못함\n  result = sentence.slice( position+&#39;ajs_anonymous_id&#39;.length +1, cutlength ) ; return result ; \n  } ; \n  getCookieValue() 이건 그냥 나의 상황에 때려맞춘거고 다른사람컴에서는 같은값이 안나오는 경우가 생긴다.</code></pre></div>\n<ul>\n<li>\n<p>수정본</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">let</span> <span class=\"token function-variable function\">getCookieValue</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n\n<span class=\"token keyword\">let</span> result <span class=\"token operator\">=</span> <span class=\"token string\">\"\"</span> <span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">let</span> sentence <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span>cookie <span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">let</span> cookiearray <span class=\"token operator\">=</span> sentence<span class=\"token punctuation\">.</span><span class=\"token function\">split</span><span class=\"token punctuation\">(</span><span class=\"token string\">\" \"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> \ncookiearray<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span> <span class=\"token punctuation\">(</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">ele<span class=\"token punctuation\">,</span>idx</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>ele<span class=\"token punctuation\">.</span><span class=\"token function\">slice</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span><span class=\"token number\">16</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span> ele<span class=\"token punctuation\">.</span><span class=\"token function\">slice</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span><span class=\"token number\">16</span><span class=\"token punctuation\">)</span><span class=\"token operator\">===</span><span class=\"token string\">'ajs_anonymous_id'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\nresult <span class=\"token operator\">=</span> ele<span class=\"token punctuation\">.</span><span class=\"token function\">slice</span><span class=\"token punctuation\">(</span><span class=\"token number\">17</span><span class=\"token punctuation\">,</span>ele<span class=\"token punctuation\">.</span>length<span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">&lt;=</span><span class=\"token operator\">=</span>문자열에 따라 변동 적인 값으로 수정\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">return</span> result <span class=\"token punctuation\">;</span> \n<span class=\"token punctuation\">}</span> <span class=\"token punctuation\">;</span>\n\n<span class=\"token function\">getCookieValue</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></code></pre></div>\n</li>\n</ul>\n</li>\n<li>\n<p>19.08.01</p>\n<ul>\n<li>[CSS] fixed -화면 고정 랑 absolute 다르다..</li>\n<li>getElementsByClassName과 Tag 네임은 특정엘리먼트가 아닌, 엘리먼트 리스트를 찾아온다. 그래서 그 태그/클래스에 다 붙이려면 반복문으로 인덱스별로 다 붙이거나, 원하는 인덱스를 골라내야 한다. 그래야 작동이 가능하다. </li>\n<li>자그만한 실수들 .인자 하나씩 빼먹는 실수들이 나온다. 맨날 쓰는건 더 제대로 알아야 할 필요가 있다. 그리고 정확하게 아는게 대충아는것보다 낫다…</li>\n</ul>\n</li>\n<li>\n<p>19.08.02</p>\n<ul>\n<li>getFullYear, getMonth, getDate는 함수다. ()으로 실행을 시켜줘야만 작동을 한다..</li>\n<li>Date, 값의 매소드다. 단독 실행 안되..</li>\n<li>특정날자 Date 값 받는것도 new Date (특정날짜) </li>\n<li>getTime, 시간 절대값 생성 ,1970 01-01 00:00 => 0</li>\n<li>숫자는 length 인자가 없습니다…</li>\n<li>toString 은 함수이다. () 으로 실행시켜야한다.</li>\n<li>css. 셀렉터 잘못 골라서 고생고생 </li>\n</ul>\n</li>\n<li>\n<p>19.08.03</p>\n<ul>\n<li>String.indexOf( ) 인자로는 스트링이 옵니다.</li>\n<li>String.indexOf(“string”) => o</li>\n<li>String.indexOf(string) => x </li>\n<li>불러오는 값이 정확히 어떤 값인지 파악합니다.</li>\n<li><code class=\"language-text\">container2.style.left = 385px</code>\n소환 되는 값은 string “385px”\n값을 사용하시고 싶으면 px를 떼시고, number 로 바꿔 주세요 바름군. </li>\n<li>처리되는 값과 가능 범위 계산 조심 범위 설정한 값에서만 움직이도록 할때 조건 계산을 잘 해야한다.</li>\n<li>한 점이 0~ 20 사이에서 내가 입력한 값으로 좌우로 3씩 움직인다.\n시작점이 10으로 고정.\n좌로 3번 가면, 좌표가 1이된다. 우로 3번 가면 좌표가 19\n내가 움직임을 입력할 수 있는 위치를 0~ 20으로 설정해 놓는다면, 1에서도 나는 -3을 입력 할수 있다. 좌표는 -2가 된다.\n내가 움직임을 입력할 수있는 범위를 벗어났기 때문에 (0~20) 나는 오른쪽으로 복귀하는 움직임을 할 수 없게 되었다.\n0~20 사이 움직여야 한다면, 결과 위치가 0~20 사이 위치하여야 하고, 입력 위치는 그 범위 안에있어야 한다.\n결과 가능한 위치 (1~19)\n좌로 입력 가능한 위치( 4~19)\n우로 입력 가능한 위치( 1~ 16) </li>\n<li>\n<p>intervalID = setInterval( func, delaytime ) 으로 실행 delaytime 은 그냥 number</p>\n<ul>\n<li>clearInterval(intervalID) 로 인터벌 삭제 </li>\n<li>리턴으로 임의의 타이머 id </li>\n</ul>\n</li>\n<li>\n<p>timeoutID = setTimeout( 실행함수나 코드 , 타임, 코드parametet(optional) )</p>\n<ul>\n<li>function() 으로 입력하면 안된다. function을 하고,인자값을 3번째 para 로 주던지,\nlet wantrunthis = ( param) => { …} 실행 원하는 함수\nparam=> target 집어넣을 값 </li>\n</ul>\n<p>\\1. setTimeout( wantrunthis, 5000, target ) </p>\n<p>\\2. setTimeout( ()=>{wantrunthis(target) }, 5000 )</p>\n<p>\\3. setTimeout( (param)=>{wantrunthis(param)},5000, target) `</p>\n</li>\n<li>\n<p>python 에러</p>\n<p>다섯줄을 출력하는 방법…? 출력을 다섯번을 하면 된다. => 큰따옴표 3개를 앞뒤로 붙인다.</p>\n</li>\n</ul>\n</li>\n<li>\n<p>19.08.04</p>\n<ul>\n<li>파이썬 등호는 == </li>\n<li>if, elif, else 조건문 뒤에는 ” : ” 붙이기 </li>\n<li>else 뒤에는 조건문이 붙지 않는다</li>\n<li>숫자를 표현할때 4/2 => 2.0 not 2 !!! so 4//2 를 쓰던지, int(4/2) 를 해줘야 한다.</li>\n</ul>\n</li>\n</ul>","fields":{"slug":"/posts/TIL&TEL_weekly_19-08-04 /","tagSlugs":["/tag/til/","/tag/tel/","/tag/wecode/"]},"frontmatter":{"date":"2019-08-04T01:23:45.678Z","description":" 19.07.29~ 19.08.04 배운것, 씨름한것들 ","tags":["TIL","TEL","Wecode"],"title":"TIL & TEL 19.07.29~ 19.08.04 "}}},"pageContext":{"slug":"/posts/TIL&TEL_weekly_19-08-04 /"}},"staticQueryHashes":["251939775","3613830147","401334301"]}